<template>
    <div>
        <div
            style="box-shadow: 0 0 10px rgba(0, 0, 0, .1); padding: 10px 20px; border-radius: 5px; margin-bottom: 10px;">
            早安，{{ user.name }}，祝你开心每一天
        </div>
        <div style="display: flex; padding: 10px 0px;">
            <el-card style="width: 100%;">
                <div slot="header" class="clearfix">
                    <span>保护环境，人人有责</span>
                </div>
                <div>
                    挑挑拣拣，剩下的是一片爱心
                    <div style="margin-top: 20px;">
                        <div style="margin: 10px 0;"><strong>切换主题色</strong></div>
                        <el-button type="primary">按钮</el-button>
                        <el-button type="success">按钮</el-button>
                        <el-button type="warning">按钮</el-button>
                        <el-button type="danger">按钮</el-button>
                        <el-button type="info">按钮</el-button>
                    </div>
                </div>
            </el-card>
        </div>
        <div style="display: flex; gap: 20px;">
            <el-card style="flex: 1;">
                <div ref="chart1" style="width: 600px; height: 400px;"></div>
            </el-card>
            <el-card style="flex: 1;">
                <div ref="chart2" style="width: 600px; height: 400px;"></div>
            </el-card>
        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts';

export default {
    name: 'home',
    mounted() {
        this.initChart1(); // 初始化柱状图
        this.initChart2(); // 初始化圆饼图
    },
    data() {
        return {
            user: JSON.parse(localStorage.getItem('user') || '{}')
        };
    },
    methods: {
        initChart1() {
            const myChart1 = echarts.init(this.$refs.chart1);
            const option1 = {
                title: {
                    text: '垃圾图像识别接口使用情况'
                },
                tooltip: {},
                legend: {
                    data: ['使用次数']
                },
                xAxis: {
                    data: ['4-7', '4-8', '4-9', '4-10', '4-11', '4-12']
                },
                yAxis: {},
                series: [
                    {
                        name: '使用次数',
                        type: 'bar', // 柱状图
                        data: [5, 20, 36, 10, 10, 20]
                    }
                ]
            };
            myChart1.setOption(option1);
        },
        initChart2() {
            const myChart2 = echarts.init(this.$refs.chart2);
            const option2 = {
                title: {
                    text: '垃圾类型分布'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    data: ['可回收物', '有害垃圾', '厨余垃圾', '其他垃圾']
                },
                series: [
                    {
                        name: '垃圾类型',
                        type: 'pie', // 圆饼图
                        radius: '50%',
                        data: [
                            { value: 335, name: '可回收物' },
                            { value: 310, name: '有害垃圾' },
                            { value: 234, name: '厨余垃圾' },
                            { value: 135, name: '其他垃圾' }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart2.setOption(option2);
        }
    }
};
</script>